<template>
    <div>
        <div class="back-btn" @click="back">
            <div class="btn">返回</div>
        </div>
        <ul class="info-list">
            <li class="flex-box">
                <div class="name h44">是否开票</div>
                <div class="switchBtn">
                    <my-switch 
                        :cb="changeInvoiceSwitch"
                    ></my-switch>
                </div>
            </li>
            <li class="flex-box" v-if="invoiceSwitch">
                <my-select 
                    v-bind:params="invoiceProps"
                    :cb="switchChange"
                ></my-select>
            </li>
        </ul>
        <div class="btn-part" @click="save">
            <div class="save-btn">保存</div>
        </div>
    </div>
</template>

<script>
    import Switch from '@/components/Switch'
    import Select from '@/components/Select'
    import Store from '@/store/Store.js'
    export default{
        data(){
            return{
                invoiceSwitch:false,
                invoiceProps:{
                    label:'开票条件',
                    data:[30, 50, 100]
                }
            }
        },
        methods:{
            back(){
                this.$router.push({
                    path:'/'
                })
            },
            init(){
                let newData = []
                this.invoiceProps.data.map((item)=>{        
                    newData.push(`消费满${item}元`)
                })
                this.invoiceProps.data = newData
            },
            changeInvoiceSwitch(v){
                this.invoiceSwitch = v
            },
            switchChange(v){
                Store.TakeOutSettingStore.invoice = v;
            },
            save(){
                Store.TakeOutSettingStore.invoiceSwitch = this.invoiceSwitch;
                this.back();
            }
        },
        created(){
            this.init()
        },
        components:{
            'my-switch':Switch,
            'my-select':Select
        }
    }
</script>

<style lang="less" scoped>
    .back-btn {
    position: fixed;
    top: 0;
    left: 0;
    margin: 16px 10px;
    .btn {
      width: 70px;
      height: 30px;
      border-radius: 15px;
      background-color: rgba(153, 153, 153, .6);
      line-height: 30px;
      color: #fff;
      font-size: 12px;
      text-align: right;
      padding-right: 15px;
      position: relative;
      &:before {
        content: '';
        position: absolute;
        top: 10px;
        left: 15px;
        width: 8px;
        height: 8px;
        border-top: 2px #fff solid;
        border-right: 2px #fff solid;
        transform: rotate(-135deg);
      }
    }
  }

  .info-list {
    margin: 62px 10px 20px;
    background: #fff;
    padding: 0 15px;
    border-radius: 4px;
    .h44 {
      height: 44px;
      line-height: 44px;
    }
    .abs {
      position: absolute;
      top: 0;
      left: 0;
    }
    .flex-box {
      display: -webkit-box;
      display: -moz-box;
    }
    li {
      position: relative;
      border-bottom: 1px #e4e4e4 solid;
      box-sizing: content-box;
      &:last-child {
        border-bottom: none;
      }
      .name {
        font-size: 14px;
        color: #666;
      }
      .switchBtn {
        position: absolute;
        top: 10px;
        right: 0;
      }
      .showContent {
        height: 44px;
        line-height: 44px;
        font-size: 12px;
        padding-right: 15px;
        text-align: right;
      }
 
      .cto-input, .cto-select, .showContent {
        border: none;
        height: 44px;
        font-size: 12px;
        background-color: transparent;
        text-align: right;
        padding-right: 15px;
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        &::-webkit-input-placeholder { /* WebKit browsers */
          color: #d2d2d2;
        }
        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
          color: #d2d2d2;
        }
        &::-moz-placeholder { /* Mozilla Firefox 19+ */
          color: #d2d2d2;
        }
        &:-ms-input-placeholder { /* Internet Explorer 10+ */
          color: #d2d2d2;
        }
      }
      .cto-select {
        direction: rtl;
      }
    }
  }


</style>